<style scoped>
.me {
  width: 100%;
  height: 300px;
  flex: 1 1 auto;
}
</style>
<template>
  <div ref="myChart" class="me" :style="chartStyle"></div>
</template>

<script>
import themes from "./echartThemes/themes";

export default {
  name: "starPie",
  data() {
    return {
      myChart: {},
      seriesItem:{},
      width:0,
      height:0,
    };
  },
  props: {
    data: {
      default: () => {
        return [
          { value: 1048, name: "Search Engine" },
          { value: 735, name: "Direct" },
          { value: 580, name: "Email" },
          { value: 484, name: "Union Ads" },
          { value: 300, name: "Video Ads" },
        ];
      },
    },
    chartStyle: {
      default: () => {},
    },
    config: {
      default: () => {
        return {
          toolbox: true,
          legend: true,
          radius: ["0%", "50%"],
          center: ["50%", "50%"],
          roseType: "radius",
          label: true,
          labelLine: true,
          color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
        };
      },
    },
    options:{
      default:()=>{
        return {}
      }
    },
    //国际化
    language: {
      default: () => {
        return {
          "en-US": {
            title: "title",
          },
          "zh-CN": {
            title: "标题",
          },
        };
      },
    },
  },
  computed: {
    option() {
      let opt = {
        title: {
          text: this.language[this.G_Locale].title,
        },
        tooltip: {
          trigger: "item",
        },
        color:this.config.color,
        toolbox: {
          show: this.config.toolbox,
          feature: {
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        legend: {
          show: this.config.legend,
          orient:'right',
          right:0,
          top:40
        },
      };
      return this.tools.lodash.merge(opt,this.options);
    },
  },
  watch:{
    'data':{
      handler(data){
        if(!data.values){
          return;
        }
        this.initChartOption();
      },
      deep:true
    }
  },
  mounted() {
    this.$nextTick(() => {
      // this.$el.parentElement.getBoundingClientRect()
      this.registerTheme();
      this.handleSetChart();
      const obs = new ResizeObserver((entries) => {
          this.handleResize();
      });
      obs.observe(this.$el.parentElement);
    });
    
  },
  methods: {
    registerTheme() {
      this.echarts.registerTheme("dark", themes.dark);
      this.echarts.registerTheme("light", themes.light);
      this.echarts.registerTheme("vintage", themes.vintage);
      this.echarts.registerTheme("westeros", themes.westeros);
      this.echarts.registerTheme("essos", themes.essos);
      this.echarts.registerTheme("wonderland", themes.wonderland);
      this.echarts.registerTheme("walden", themes.walden);
      this.echarts.registerTheme("chalk", themes.chalk);
      this.echarts.registerTheme("infographic", themes.infographic);
      this.echarts.registerTheme("macarons", themes.macarons);
      this.echarts.registerTheme("roma", themes.roma);
      this.echarts.registerTheme("shine", themes.shine);
      this.echarts.registerTheme("purplePassion", themes.purplePassion);
    },
    handleSetChart() {
      this.myChart = this.echarts.init(this.$el, this.config.theme);
      this.initChartOption();
    },
    initChartOption() {
      this.buildPieOption();
    },
    buildPieOption() {
      let option = {
        ...this.option,
        series: [this.getSeriesItem()],
      };
      this.myChart.setOption(option);
    },
    handleResize() {
      this.myChart.resize();
    },
    getSeriesItem() {
      return {
        name: this.language[this.G_Locale].title,
        type: "pie",
        radius: this.config.radius,
        center: this.config.center,
        roseType: this.config.roseType,
        label: {
          show: this.config.label,
        },
        labelLine: {
          show: this.config.labelLine,
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
        data: this.data,
      };
    },
  },
};
</script>

<style scoped></style>
